﻿.themeBg() {
  background: #f5f5f5;
}

.themeSpecific() {
  .ThemeBGColor9 {
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

.themeLoopClass(@start, @end, @className, @propertyName, @variableName, @pseudo: "")
  when
  (@start =< @end) {
  @varialbeValue: e("@{variableName}@{start}");
  @pseudoValue: e(@pseudo);
  .@{className}@{start}@{pseudoValue} {
    @{propertyName}: @@varialbeValue !important;
  }
  .themeLoopClass(
    @start + 1,
    @end,
    @className,
    @propertyName,
    @variableName,
    @pseudo
  );
}

@iconTypes: "system", "post", "calendar", "task", "knowledge", "uploadhelper",
  "hr", "approval", "check", "dossier", "score", "worksheet", "workflow";
@calendarDateColor: #e85c72;

// definition
.buildIconClass(@iterator: 1) when (@iterator <= length(@iconTypes)) {
  @prefix: escape("chat_");
  @urlExt: escape(".png");
  @type: escape(extract(@iconTypes, @iterator));
  .@{prefix}@{type} {
    @urlPath: "./icons/@{prefix}@{type}";
    @url: "@{urlPath}@{urlExt}";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url("./icons/@{prefix}@{type}@{urlExt}");

    &[data-date]:before when (extract(@iconTypes, @iterator) = "calendar") {
      font-size: 20px;
      position: absolute;
      display: inline-block;
      width: 100%;
      content: attr(data-date);
      transform: scale(0.5);
      text-align: center;
      color: @calendarDateColor;
    }
  }
  .buildIconClass(@iterator + 1);
}

.themeAppIcon() {
  .buildIconClass();
}
